<template>
	<view class="file-index">
		<view class="title">
			<view>
				{{title}}
			</view>
			<view class="require" v-if="require"></view>
		</view>
		<view class="update-file">
			<view class="left">
				<button @click="updateFile">
					<span class="iconfont icon" style="color: #0077FA;">&#xe618;</span>
					选择文件
				</button>
			</view>
			<view class="right">
				单个文件最大支持10M
			</view>
		</view>
		<view class="explain" v-if="explain">
			实施文档包括但不限于实施清单、实施时间计划表等
		</view>
		<view class="file-list">
			<view class="file-item" v-for="(item, index) in tempFilePaths" :key="index">
				{{item.name}}
				<view class="close" @click="moveFile(index)">
					<uni-icons type="closeempty" size="16" color="#4095E5"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {updateFileApi} from "@/api/common.js"
	export default{
		props:{
			title:{
				type:String,
				default:'附件'
			},
			require:{
				type:Boolean,
				default:false
			},
			explain:{
				type:Boolean,
				default:false
			},
			paths:{
				type: Array,
				default: [],
			}
		},
		data(){
			return {
				tempFilePaths:[]
			}
		},
		mounted() {
			this.tempFilePaths = this.paths;
		},
		methods:{
			updateFile(){
				wx.chooseMessageFile({
				  count: 10,
				  type: 'all',
				  success: async (res) => {
						for(let i = 0; i < res.tempFiles.length; i++){
							let ress = await updateFileApi(res.tempFiles[i].path).catch(() => {
								return Promise.reject();
							})
							res.tempFiles[i].path = ress.data
						}
				    this.tempFilePaths = [...this.tempFilePaths, ...res.tempFiles];
						console.log(this.tempFilePaths)
						this.$emit('update', this.tempFilePaths);
				  }
				})
			},
			// 移除文件
			moveFile(index){
				this.tempFilePaths.splice(index, 1);
				this.$emit('update', this.tempFilePaths);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.file-index{
		padding: 12rpx 30rpx 68rpx;
		.title{
			font-size: 28rpx;
			color: #101010;
			padding: 0 0 16rpx;
			display: flex;
			align-items: center;
			.require{
			  height: 28rpx;
			  width: 6rpx;
			  background-color: #c24135;
			  margin-left: 10rpx;
		  }
		}
		.update-file{
			@include flex-r-start-center;
			.left{
				button{
					@include flex-r-center-center;
					@include button;
					width: 208rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background-color: #f4f5f5;
					color: #0077FA;
					font-size: 28rpx;
					.icon{
						padding-right: 18rpx;
						font-size: 40rpx;
					}
				}
			}
			.right{
				color: rgba(28,31,35,0.8);
				font-size: 28rpx;
				padding-left: 20rpx;
			}
		}
		.explain{
			padding: 8rpx 0 0;
			color: #909090;
			font-size: 24rpx;
		}
		.file-list{
				padding: 18rpx 0;
				.file-item{
					width: 100%;
					@include essipsis;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					border-radius: 6rpx;
					background-color: #F3F6F9;
					color: #101010;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					position: relative;
					.close{
						position: absolute;
						top: 0;
						right: 10rpx;
					}
				}
		}
	}
	::v-deep .uni-file-picker__lists {
		position: absolute;
		margin-top: 80rpx;
	}
</style>